{% extends 'base.html' %}
{% block title %}{{ course.name }}{% endblock %}
{% load staticfiles %}

{% block custom_bread %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'courses:course_list' %}">公开课程:{{ course.name }}</a>></li>
                <li>课程详情</li>
            </ul>
        </div>
    </section>
{% endblock %}

{% block custom_content %}
<section>
  <div class="wp">
    <div class="groupPurchase_detail detail">
      <div class="toppro">
        <div class="left">
          <div class="picbox">
            <div class="tb-booth tb-pic">
              <img width="440" height="445" src="{{ MEDIA_URL }}{{ course.image }}" class="jqzoom"/>
            </div>
          </div>
          <div class="des">
            <h1 title="django 从入门到精通体验开始了">{{ course.name }}</h1>
            <span class="key">{{ course.desc }}</span>
            <div class="prize">
              <span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
              <span class="fr">学习人数：{{ course.students }}</span>
            </div>
            <ul class="parameter">
              <li><span class="pram word3">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：</span><span>{{ course.learn_times }}</span></li>
              <li><span class="pram word3">章&nbsp;节&nbsp;数：</span><span>{{ course.get_zj_nums }}</span></li>
              <li><span class="pram word3">课程类别：</span><span title="">{{ course.category }}</span></li>
              <li class="piclist"><span class="pram word4">学习用户：</span>
                {% for user_course in course.get_learn_users %}
                  <span class="pic"><img width="40" height="40" src="{{ MEDIA_URL }}{{ user_course.user.image}}"/></span>
                {% endfor %}

              </li>
            </ul>
            <div class="btns">
              <div class="btn colectgroupbtn" id="jsLeftBtn">
                {% if has_fav_course %}
                  已收藏
                {% else %}
                  收藏
                {% endif %}
              </div>
              <div class="buy btn"><a style="color: white; display: block;" href="{% url 'courses:course_info' course.id %}">开始学习</a></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="head">
            <h1>授课机构</h1>
            <p>世界名校，课程权威</p>
          </div>
          <div class="pic">
            <a href="/company/14/">
              <img width="150" height="80" src="{{ MEDIA_URL }}{{ course.course_org.image }}"/>
            </a>
          </div>
          <a href="/company/14/">
            <h2 class="center" title="{{ course.course_org.name }}">{{ course.course_org.name }}</h2>
          </a>
          <div class="btn  notlogin" data-favid="14" id="jsRightBtn">
             {% if has_fav_org %}
               已收藏
             {% else %}
               收藏
             {% endif %}
          </div>
          <div class="clear">
            <ul>
              <li>
                <span>课 &nbsp;程&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   {{ course.course_org.course_nums }}</span>
              </li>
              <li>
                <span>教 &nbsp;师&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  {{ course.course_org.get_teacher_nums }}</span>
              </li>
              <li>所在地区：&nbsp;&nbsp;{{ course.course_org.address }}</li>
              <li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                <img title="金牌机构"  src="{% static 'images/gold.png' %}"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="wp">
    <div class="list groupPurchase_detail_pro">
      <div class="left layout">
        <div class="head">
          <ul class="tab_header">
            <li class="active">课程详情</li>
          </ul>
        </div>
        <div class="tab_cont tab_cont1">
          <p>{{ course.detail }}</p>
        </div>
        <div class="tab_cont tab_cont2">
          <div class="comment">
            <div class="comenlist">

            </div>
          </div>
        </div>
      </div>
      <div class="right layout">
        <div class="head">相关课程推荐</div>
        <div class="group_recommend">
          {% for relate_course in relate_courses %}
            <dl>
            <dt>
              <a target="_blank" href="">
                <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ relate_course.image }}"/>
              </a>
            </dt>
            <dd>
              <a target="_blank" href=""><h2>{{ relate_course.name }}</h2></a>
              <span class="fl">学习时长：<i class="key">{{ relate_course.learn_times }}</i></span>
            </dd>
          </dl>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block custom_js %}
 <script>
//收藏分享
function add_fav(current_elem, fav_id, fav_type) {
  $.ajax({
    cache: false,
    type: "POST",
    url: "{% url 'org:add_fav' %}",
    data: {'fav_id': fav_id, 'fav_type': fav_type},
    async: true,
    beforeSend: function (xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
    },
    success: function (data) {
      if (data.status == 'fail') {
        if (data.msg == '用户未登录') {
          window.location.href = "{% url 'login' %}";
        } else {
          current_elem.text(data.msg)
        }
      } else if (data.status == 'success') {
        current_elem.text(data.msg)
      }
    },
    error: function(error) {
      alert('ajax 请求失败！')
    }
  });
}
// 收藏课程
$('#jsLeftBtn').on('click', function () {
    add_fav($(this), {{ course.id }}, 1);
});

//收藏课程机构
$('#jsRightBtn').on('click', function () {
    add_fav($(this), {{ course.course_org.id }}, 2);
});
</script>
{% endblock %}